<template>
	<view class="container-lang">
		<view class="lang-top">
			<view class="backIcon" @click="back()">
				<uni-icons type="left" size="26"></uni-icons>
			</view>
			<view class="langText">
				{{$t('语言偏好')}}
			</view>
			<view class="clearView">
				
			</view>
		</view>
		<!-- 语言选择 -->
		<view class="">
			<view class="langView">
				<view class="lang-item" v-for="(item,index) in lanList" :keys="index" @click="setlang(item.lable,item.url)">
					<view v-if="item.lable == lang" class="activelan">
						<image :src="item.url" class="langFlag"></image>
						<span class="f14">{{item.name}}</span>
					</view>
					<view v-else class="">
						<image :src="item.url" class="langFlag"></image>
						<span class="f14">{{item.name}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lanList:[
					{"lable":"zh","name":"简体中文","url":"/static/lang/zh_cn.png"},
					{"lable":"hk","name":"繁體中文","url":"/static/lang/zh_hk.png"},
					{"lable":"en","name":"English","url":"/static/lang/en_us.png"},
					{"lable":"th","name":"ภาษาไทย","url":"/static/lang/th_th.png"},
					{"lable":"vi","name":"Người việt nam","url":"/static/lang/vi_vn.png"},
					{"lable":"ja","name":"日本語","url":"/static/lang/ja_jp.png"},
					{"lable":"ko","name":"한국어","url":"/static/lang/ko_kr.png"},
					{"lable":"ms","name":"Melayu","url":"/static/lang/c.png"},
					{"lable":"tr","name":"Türkçe","url":"/static/lang/tr_tr.png"},
					{"lable":"es","name":"Español","url":"/static/lang/es_es.png"}
				],
				pageid:1,
				num:3,
				lang:"en",
				isChecked:false,
			}
		},
		onShow() {
			this.lang = uni.getStorageSync('language') || 'en'
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1,//返回层数，2则上上页
				})
			},
			// 选择语言
			setlang(lang,url){
				uni.setStorageSync('language_image',url)
				this.lang = lang
				uni.setStorageSync('language',this.lang)
				this.$i18n.locale = this.lang;
				 // #ifdef APP-PLUS
				 plus.storage.setItem('language', this.lang);
				 // #endif
				 // #ifdef H5
				 localStorage.setItem('language', this.lang);
				 // #endif
			},
		}
	}
</script>

<style>
	.langView{
		margin-top:10px;
	}
	.lang-item{
		height:100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #ccc;
	}
	.langFlag{
		width: 66rpx;
		height:66rpx;
		vertical-align: middle;
		margin-left:20rpx;
		
	}
	.container-lang{
		background-color: #fafafa;
	}
	.lang-top{
		display: flex;
		margin: 0 0 0 16rpx;
		height:88rpx;
		line-height:88rpx;
	}
	.backIcon{
		width:20%;
	}
	.langText{
		font-size:36rpx;
		width:60%;
		text-align: center;
		
	}
	.clearView{
		width:20%;
	}
	.f14{
		font-size: 28rpx;
		font-weight: 600;
	}
	.activelan{
		background-color: #0a5;
	}
</style>
